<template>
  <div class="svaenotice">
    <!--<div class="savetab" v-show="result.length">-->
    <div class="savetab" v-show="result.length">
      <h4 class="title">历史通知书查询列表</h4>
      <table class="table">
        <tr>
          <th class="active">序号</th>
          <th class="active name">名字</th>
          <th class="active">车牌号</th>
          <td>处罚通知书</td>
          <td>处罚决定书</td>
          <td>证据保存书</td>
        </tr>
        <tr v-for="(item,index) in result">
          <td>{{index+1}}</td>
          <td>{{item.party}}</td>
          <td>{{item.carnumber}}</td>
          <td @click="noticedetail(item)">通知书详情</td>
          <td @click="punishdetail(item)">处罚书详情</td>
          <td>证据保存书</td>
        </tr>
      </table>
    </div>

    <div class="mes" v-show="!result.length &&flag">
      没有你要查询的信息哦！``
    </div>
    <loading v-show="!result.length&&!flag"></loading>
    <!--<router-view></router-view>-->
  </div>
</template>

<script type="text/ecmascript-6">
  import http from '../util/https'
  import {baseurl} from '../base/config'
  import {mapMutations} from "vuex"
  import loading from './loading'

  export default {
    name: "svaenotice",
    data() {
      return {
        result: [],
        flag: false
      }
    },
    created() {
      this.fetchData();
    },
    components: {
      loading
    },
    methods: {
      ...mapMutations({
        setuser: "SET_USER",
        setstate: "SET_STATE"
      }),
      //处罚书详情
      punishdetail(item) {
        this.$router.push({
          name: "svaenticeDetail"
        });
        this.setuser(item);
        this.setstate(0);
      },
      //通知书详情
      noticedetail(item) {
        this.$router.push({
          name: "svaenticeDetail"
        });
        this.setuser(item);
        this.setstate(1);
      },
      //渲染页面
      fetchData: async function () {
        const url = baseurl + "/agreement/getMyselfAgreement.json";
        let params = {};
        const res = await http.get(url, params);
        if (res.data.code === 0) {
          // this.result = res.data.data;
          setTimeout(() => {
            if (!this.result.length) {
              this.flag = true
            }
          }, 3000)

        }
      }

    }
  }
</script>
<style scoped type="text/less" lang="less">
  .svaenotice {
    .title {
      text-align: center;
      font-size: .35rem;
      margin: 1.5rem 0 .5rem;
      color: #449d44;
      z-index: 20;
    }
    .table {
      border: 1px solid #ccc;
      font-size: .25rem;
      width: 100%;
      .add {
        width: 190px;
      }
      .left {
        text-align: left;
      }
      tr th {
        line-height: .5rem;
        border: 1px solid #ccc;
      }
      tr td {
        border: 1px solid #ccc;
        /*line-height: 20px;*/
        line-height: .5rem;
        text-align: center;
        padding: .05rem;
      }
    }
    .mes {
      text-align: center;
      font-size: .35rem;
      line-height: 10rem;
    }
  }

</style>
